<!--
 * @Author: dengyl
 * @Date: 2022-01-13 15:37:15
 * @LastEditTime: 2022-08-18 17:32:12
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 模板LOGO公用组件
 * @FilePath: \ctp-static-portal-front\src\components\logo\index.vue
-->
<template>
  <div :style="logoWrapperStyle" class="logoWrap">
    <div class="logoImg" :style="logoImgStyle">
      <img
        v-if="logoData.showLogo && logoData.imgPath"
        :src="logoData.imgPath"
        :style="logoStyle"
      />
    </div>
    <div v-if="logoData.showGroupName" class="companyNames">
      <div class="cnName" :style="logoImgStyle">{{ logoData.groupZhName }}</div>
      <!-- <div class="enName">{{ logo.groupEnName }}</div> -->
    </div>
    <div v-if="logoData.showUnitName" class="companyNames">
      <div class="cnName" :style="logoImgStyle">{{ logoData.unitName }}</div>
      <!-- <div class="enName">{{ logo.groupEnName }}</div> -->
    </div>
  </div>
</template>

<script>
  /*
   *  LOGO���
   * */
  export default {
    name: 'Logo',
    props: {
      logo: {
        // type: Object
      }
    },
    data() {
      return {};
    },
    computed: {
      logoStyle() {
        // logoShowType，1-等比缩放，2-原图显示
        const { logoShowType, logoHeight } = this.logo;
        return {
          height: logoShowType == 1 ? `${logoHeight}px` : 'auto',
          maxWidth: '100%'
        };
      },
      txtStyle() {
        const { logoShowType, logoHeight } = this.logo;
        return {
          marginTop: logoShowType == 1 ? `${logoHeight / 2 - 8}px` : '0'
        };
      },
      logoWrapperStyle() {
        return {
          height: `${this.logo.logoHeight}px`
        };
      },
      logoImgStyle() {
        return {
          height: `${this.logo.logoHeight}px`,
          lineHeight: `${this.logo.logoHeight}px`
        };
      },
      logoData() {
        return {
          imgPath: this.logo.logo,
          groupZhName: this.logo.groupName,
          showLogo: this.logo.showLogo == '1',
          showGroupName: this.logo.showGroupName == '1',
          showUnitName: this.logo.showUnitName == '1',
          unitName: this.logo.unitName
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .logoWrap {
    // display: flex;
    // align-items: center;
    overflow: hidden;

    .logoImg {
      float: left;
      max-width: 600px;

      img {
        display: inline;
        vertical-align: middle;
      }
    }

    .companyNames {
      float: left;
      // display: flex;
      margin-left: 10px;
      // line-height: 17px;
      // flex-direction: column;

      .cnName {
        // height: 18px;
        overflow: hidden;
        font-size: 16px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .enName {
        overflow: hidden;
        font-size: 12px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 0.6;
      }
    }
  }
</style>
